<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const favorites = ref([
  {
    id: 1,
    title: '2023年科技行业发展趋势分析',
    category: '科技',
    publishDate: '2023-11-01',
    excerpt: '本文深入分析了2023年科技行业的发展趋势，包括人工智能、区块链、元宇宙等前沿领域的最新进展和未来展望...',
    image: 'https://picsum.photos/id/1/300/200'
  },
  {
    id: 2,
    title: '健康生活方式指南：如何保持身心健康',
    category: '健康',
    publishDate: '2023-10-28',
    excerpt: '在现代快节奏的生活中，保持身心健康变得越来越重要。本文提供了一系列实用的健康生活方式建议...',
    image: 'https://picsum.photos/id/2/300/200'
  },
  {
    id: 3,
    title: '全球经济复苏：机遇与挑战并存',
    category: '财经',
    publishDate: '2023-10-20',
    excerpt: '后疫情时代，全球经济正处于复苏阶段，但同时也面临着诸多挑战。本文分析了当前经济形势和未来发展方向...',
    image: 'https://picsum.photos/id/3/300/200'
  },
  {
    id: 4,
    title: '新兴产业投资机会分析',
    category: '财经',
    publishDate: '2023-10-15',
    excerpt: '随着技术革新和社会需求变化，一批新兴产业正在崛起。本文为投资者提供了最新的产业投资机会分析...',
    image: 'https://picsum.photos/id/4/300/200'
  }
])

const searchQuery = ref('')
const selectedCategory = ref('all')
const categories = ref(['全部', '科技', '健康', '财经', '体育', '娱乐'])

// 检查用户登录状态
const checkLoginStatus = () => {
  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'
  if (!isLoggedIn) {
    router.push('/login')
    return
  }
}

// 过滤收藏内容
const filteredFavorites = ref([])

const filterFavorites = () => {
  let result = [...favorites.value]
  
  // 按关键词搜索
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(item => 
      item.title.toLowerCase().includes(query) || 
      item.excerpt.toLowerCase().includes(query) ||
      item.category.toLowerCase().includes(query)
    )
  }
  
  // 按分类筛选
  if (selectedCategory.value !== 'all' && selectedCategory.value !== '全部') {
    result = result.filter(item => item.category === selectedCategory.value)
  }
  
  filteredFavorites.value = result
}

// 移除收藏
const removeFavorite = (id) => {
  if (confirm('确定要取消收藏这篇文章吗？')) {
    favorites.value = favorites.value.filter(item => item.id !== id)
    filterFavorites()
  }
}

// 跳转到文章详情
const goToArticle = (id) => {
  // 这里可以根据实际情况修改为真实的文章详情页路由
  router.push(`/article/${id}`)
}

onMounted(() => {
  checkLoginStatus()
  filterFavorites()
})
</script>

<template>
  <div class="favorites-container">
    <div class="container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>我的收藏</h1>
        <p class="page-description">管理您收藏的文章和内容</p>
      </div>
      
      <!-- 搜索和筛选区域 -->
      <div class="search-filter-section">
        <div class="search-box">
          <input 
            type="text" 
            placeholder="搜索收藏内容..." 
            v-model="searchQuery"
            @input="filterFavorites"
            class="search-input"
          >
          <button class="search-button">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
        
        <div class="filter-section">
          <label for="category-filter">分类筛选：</label>
          <select 
            id="category-filter" 
            v-model="selectedCategory"
            @change="filterFavorites"
            class="category-select"
          >
            <option value="all">全部</option>
            <option v-for="category in categories" :key="category" :value="category">
              {{ category }}
            </option>
          </select>
        </div>
      </div>
      
      <!-- 收藏列表 -->
      <div class="favorites-list">
        <div v-if="filteredFavorites.length > 0" class="favorites-grid">
          <div v-for="item in filteredFavorites" :key="item.id" class="favorite-card">
            <div class="card-image">
              <img :src="item.image" :alt="item.title" class="article-image">
            </div>
            <div class="card-content">
              <div class="card-header">
                <span class="article-category">{{ item.category }}</span>
                <span class="article-date">{{ item.publishDate }}</span>
              </div>
              <h3 class="article-title" @click="goToArticle(item.id)">{{ item.title }}</h3>
              <p class="article-excerpt">{{ item.excerpt }}</p>
              <div class="card-actions">
                <button class="read-button" @click="goToArticle(item.id)">阅读全文</button>
                <button class="remove-button" @click="removeFavorite(item.id)">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M22 11.08V12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12V11.08C2 10.5339 2.21071 10.0014 2.58579 9.58579C2.96086 9.17018 3.49342 8.94645 4 8.94645H6H18H20C20.5066 8.94645 21.0391 9.17018 21.4142 9.58579C21.7893 10.0014 22 10.5339 22 11.08Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M6 8.94643V6C6 4.89543 6.89543 4 8 4H16C17.1046 4 18 4.89543 18 6V8.94643" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M10 11L10 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M14 11L14 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  取消收藏
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 空状态 -->
        <div v-else class="empty-state">
          <div class="empty-icon">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 4H8C6.89543 4 6 4.89543 6 6V20C6 21.1046 6.89543 22 8 22H16C17.1046 22 18 21.1046 18 20V6C18 4.89543 17.1046 4 16 4Z" stroke="var(--text-muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M14 2H21V9" stroke="var(--text-muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M14 2V5C14 6.65685 12.6569 8 11 8H2" stroke="var(--text-muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h3>暂无收藏内容</h3>
          <p>您还没有收藏任何文章，快去浏览并收藏感兴趣的内容吧！</p>
          <router-link to="/" class="browse-button">浏览文章</router-link>
        </div>
      </div>
      
      <!-- 底部导航 -->
      <div class="bottom-navigation">
        <router-link to="/profile" class="nav-button">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M3 21V19C3 17.9391 3.42143 16.9217 4.17157 16.1716C4.92172 15.4214 5.93913 15 7 15H17C18.0609 15 19.0783 15.4214 19.8284 16.1716C20.5786 16.9217 21 17.9391 21 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          个人中心
        </router-link>
        <router-link to="/history" class="nav-button">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 21L12 16L5 21V5C5 3.89543 5.89543 3 7 3H17C18.1046 3 19 3.89543 19 5V21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          浏览历史
        </router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
.favorites-container {
  min-height: 100vh;
  background-color: var(--background-color);
  padding: 24px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-header {
  margin-bottom: 32px;
  text-align: center;
}

.page-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.page-description {
  font-size: 16px;
  color: var(--text-secondary);
}

.search-filter-section {
  background-color: var(--card-background);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 24px;
  margin-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.search-box {
  flex: 1;
  min-width: 300px;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 12px 48px 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 16px;
  transition: border-color var(--transition-fast);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.search-button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

.filter-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-section label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.category-select {
  padding: 10px 16px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  background-color: white;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.category-select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.favorites-list {
  margin-bottom: 32px;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
}

.favorite-card {
  background-color: var(--card-background);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.favorite-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.article-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.favorite-card:hover .article-image {
  transform: scale(1.05);
}

.card-content {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.article-category {
  background-color: var(--primary-light);
  color: var(--primary-color);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.article-date {
  font-size: 12px;
  color: var(--text-muted);
}

.article-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.article-title:hover {
  color: var(--primary-color);
}

.article-excerpt {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-actions {
  display: flex;
  gap: 12px;
}

.read-button {
  flex: 1;
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color var(--transition-fast);
}

.read-button:hover {
  background-color: var(--primary-hover);
}

.remove-button {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: transparent;
  color: var(--error-color);
  border: 1px solid var(--error-color);
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all var(--transition-fast);
}

.remove-button:hover {
  background-color: var(--error-color);
  color: white;
}

.empty-state {
  text-align: center;
  padding: 64px 24px;
  background-color: var(--card-background);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}

.empty-icon {
  margin-bottom: 24px;
}

.empty-state h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.browse-button {
  display: inline-block;
  background-color: var(--primary-color);
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: background-color var(--transition-fast);
}

.browse-button:hover {
  background-color: var(--primary-hover);
}

.bottom-navigation {
  display: flex;
  justify-content: center;
  gap: 24px;
  background-color: var(--card-background);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 20px;
}

.nav-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: transparent;
  color: var(--text-secondary);
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.nav-button:hover {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-filter-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-box {
    min-width: auto;
  }
  
  .filter-section {
    justify-content: center;
  }
  
  .favorites-grid {
    grid-template-columns: 1fr;
  }
  
  .bottom-navigation {
    flex-direction: column;
  }
  
  .card-image {
    height: 180px;
  }
}
</style>

<style>
:root {
  --transition-fast: 0.2s ease;
  --primary-light: rgba(59, 130, 246, 0.1);
}
</style>